* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  outline-color: transparent;
}
body {
  align-items: center;
  background: #fafafa;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background-color: #dfedfb;
}
:root {
  --speed: 0.25;
  --scale-step: 0.05;
  --base-width: 25;
  --base-height: calc(var(--base-width) * 1.83333333333);
  --pop-height: 60;
  --slide-distance: 60;
  --base-slide: calc(var(--base-width) * 1);
}
@media (min-width: 768px) {
  :root {
    --base-width: 25;
  }
}
.bears {
  height: calc(var(--base-height) * 1vmin);
  margin: 0;
  position: relative;
  width: calc(var(--base-width) * 1vmin);
}
.bears:after {
  background: #bad9f7;
  content: "";
  height: 1vmin;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, 0);
  width: 150%;
  border-radius: 1vmin;
}
.bear {
  --bear-color: hsl(25, 60%, calc(var(--lightness) * 1%));
  --claw-color: hsl(25, 60%, calc((var(--lightness) - 20) * 1%));
  --shirt-color: hsl(var(--shirt-hue), 50%, 60%);
  height: 100%;
  position: absolute;
  width: 100%;
/*
  * Purely for styling the SVG elements
  */
}
.bear__stroke {
  fill: #1a1a1a;
}
.bear .bear-body {
  fill: var(--bear-color);
}
.bear .bear-shirt {
  fill: var(--shirt-color);
}
.bear .bear-claw {
  fill: var(--claw-color);
}
.bear .bear-foot {
  stroke: var(--claw-color);
}
.bear__half {
  position: absolute;
  height: 50%;
  left: 0;
  overflow: hidden;
  width: 100%;
}
.bear__half svg {
  height: 200%;
  position: absolute;
  width: 100%;
}
.bear__half--top {
  top: 0;
}
.bear__half--top svg {
  top: 0;
}
.bear__half--bottom {
  bottom: 0;
}
.bear__half--bottom svg {
  bottom: 0;
}
.bear__container,
.bear__dummy-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.bear__container {
  transform: scale(calc(1 - ((var(--bear-index)) * var(--scale-step))));
  transform-origin: bottom;
}
.bear__dummy {
  --bear-color: hsl(25, 60%, calc(var(--lightness) * 1%));
  --claw-color: hsl(25, 60%, calc((var(--lightness) - 20) * 1%));
  --shirt-color: hsl(var(--shirt-hue), 50%, 60%);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(calc(1 - ((var(--bear-index) + 1) * var(--scale-step))));
  transform-origin: bottom center;
  width: 100%;
}
[type='checkbox'],
[type='reset'] {
  display: none;
}
label {
  cursor: pointer;
  display: none;
}
[for='reset'] {
  display: block;
  height: 44px;
  position: fixed;
  right: 1rem;
  top: 1rem;
  transition: transform calc(var(--speed) * 1s) ease;
  width: 44px;
}
[for='reset']:hover {
  transform: translate(0, -5%) scale(1.1);
}
[for='reset']:hover svg path {
  fill: #111;
}
[for='reset'] svg {
  height: 44px;
  width: 44px;
}
[for='reset'] svg path {
  transition: fill calc(var(--speed) * 1s) ease;
  fill: #aaa;
}
/**
 * A lot needs to happen when we check the box
 * 1. Disable clicking til animation finished
 * 2. Move the parent bear
 * 3. Reveal the baby bear
 * 4. Move the baby bear
 * 5. Show the real baby bear
 * 6. Show the new input
 * 7. Hide the dummy baby bear
 * 8. Fade out the parent bear
*/
input:checked + .bear + input + .bear,
input:checked + .bear + .bear {
  display: block;
  -webkit-animation: appear 0s calc(var(--speed) * 5s) both;
          animation: appear 0s calc(var(--speed) * 5s) both;
}
input:checked + .bear,
input:checked + .bear + input:checked + .bear {
  -webkit-animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards;
          animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards;
  pointer-events: none;
}
input:checked + .bear .bear__half--top,
input:checked + .bear + input:checked + .bear .bear__half--top {
  -webkit-animation: open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards;
          animation: open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards;
}
input:checked + .bear .bear__dummy-container,
input:checked + .bear + input:checked + .bear .bear__dummy-container {
  animation: move calc(var(--speed) * 2s) calc(var(--speed) * 3s) forwards, appear 0s calc(var(--speed) * 5s) reverse forwards;
}
@-webkit-keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -1%), 0);
  }
}
@keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -1%), 0);
  }
}
@-webkit-keyframes open {
  0% {
    transform: translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(0, -100%);
  }
  66.66666666666667% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translate(-100%, 100%);
  }
}
@keyframes open {
  0% {
    transform: translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(0, -100%);
  }
  66.66666666666667% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translate(-100%, 100%);
  }
}
@-webkit-keyframes move {
  0% {
    transform: translate(0, 0) translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
  66.66666666666667% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1vmin) + var(--slide-distance) * 1%), 0);
  }
  100% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1vmin) + var(--slide-distance) * 1%), calc(var(--pop-height) * 1%));
  }
}
@keyframes move {
  0% {
    transform: translate(0, 0) translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
  66.66666666666667% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1vmin) + var(--slide-distance) * 1%), 0);
  }
  100% {
    transform: translate(0, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1vmin) + var(--slide-distance) * 1%), calc(var(--pop-height) * 1%));
  }
}
@-webkit-keyframes slideOut {
  from {
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -1%), 0);
  }
  to {
    opacity: 0;
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -2%), 0);
  }
}
@keyframes slideOut {
  from {
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -1%), 0);
  }
  to {
    opacity: 0;
    transform: translate(calc((var(--base-slide) * -1vmin) + var(--slide-distance) * -2%), 0);
  }
}
@-webkit-keyframes appear {
  from {
    transform: scale(0);
  }
}
@keyframes appear {
  from {
    transform: scale(0);
  }
}
